<script setup>
import Form from './form/form.vue'
import { ref,reactive } from 'vue'

const formRules = ref({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', message: '年龄必须为数字值'}
 ]
})

const username = reactive({
  type: 'text',
    labelText: '账号',
    prop: 'username',
    placeholder: '请输入登录名'
})
const password = reactive({
  type: 'password',
    labelText: '密码',
    prop: 'password',
    placeholder: '请输入密码'
})

const formData = ref([
  username,
  password
])

defineProps({
  msg: String,
})

const formModel = ref(null)
const Save = async ()=>{
  console.log(formModel)
  console.log(formModel.value)
  await formModel.value.Save()
  console.log(formModel.value.formValue)
}
const reset = ()=>{
  formModel.value.resetFields()
}
</script>

<template>
  <div>
    <Form :formData="formData" :formRules="formRules" ref="formModel"></Form>
    <el-button @click="Save">保存</el-button>
    <el-button @click="reset">重置化</el-button>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
